<%--Created by IntelliJ IDEA.
User: DELL
Date: 2020/9/26
Time: 22:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta>
    <title>找回密码</title>
    <style type="text/css" rel="stylesheet">
        body{
            width: 1010px;
        }
        .content{
            width: 800px;
            margin: 0 auto;
            margin-top: 50px;
            border: 2px solid #0192e8;
            text-align: center;
        }
        .content form{
            width: 500px;
            margin: 0 auto;
        }
        .content form>div{
            width: 400px;
            height: 30px;
            margin: 0 auto;
            margin-bottom: 10px;
            border: 1px solid #0192e8;
        }
        .content form>div span,.content form>div input{
            display: block;
            float: left;
        }
        .content form>div span{
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .content form>div span.tishi,.content form>div span.tishi1{
            width: 150px;
        }
        input{
            height: 30px;
            text-indent: 10px;
            padding:0;
            box-sizing: border-box;
            margin-right: 10px;
            background: none;
            border: none;
            font-size: 30px;
            width: 150px;
        }
        button{
            width: 400px;
            height: 30px;
            background: #0192e8;
            border: 1px solid #0192e8;
            box-sizing: border-box;
            color: white;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 2px;
            cursor: pointer;
        }
        button:hover{
            color: red;
            border: 1px solid red;
            background: none;
        }
    </style>
    <script type="text/javascript" src="/WebContent/JQuery/jquery-3.4.1.js"></script>
</head>
<body>
     <article class="content">
          <form id="formtj" action="" method="post" onsubmit="return false">
              <div class="mima" style="margin-top: 10px">
                  <span>密码：</span>
                  <input id="password" type="password" name="alterpassword" placeholder="请输入密码" value="${requestScope.usermm.userPassword}">
                  <span class="tishi"></span>
              </div>
              <div class="mima">
                  <span>确认密码：</span>
                  <input id="password1" type="password" name="qralterpassword" placeholder="请再次输入密码" value="${requestScope.usermm.userPassword}">
                  <span class="tishi1"></span>
              </div>
              <div class="mima">
                  <button id="btn">修改</button>
              </div>
          </form>
         <script>
             $(document).ready(function () {
                 //密码输入框判断
                 var passtate = false;
                 var passtate1 = false;
                 $("#password").blur(funpass);
                 $("#password1").blur(funpass1);
                 //表单提交验证
                 $("#formtj").submit(function () {
                     if(passtate && passtate1){
                         var pas = $("#password1").val();
                         $.ajax({
                             url:"/DataDML",
                             type:"post",
                             data:{
                                 "id":"${sessionScope.user.userId}",
                                 "datatype":"xgmm",
                                 "password":pas
                             },
                             dataType:"text",
                             success:function (data) {
                                 alert("修改成功！");
                             },
                             error:function (error) {
                                  alert("服务器维护中！");
                             }
                         })
                         return true;
                     }else{
                         alert("提交失败！");
                         return false;
                     }
                 })
                 //封装的正则验证函数
                 function funpass() {
                     var pass = /^[0-9a-zA-z]{1,16}$/;
                     var passcont = $("#password").val();
                     if(pass.test(passcont)){
                         $(".tishi").css("color","green").html("密码正确！");
                         passtate = true;
                         return;
                     }else{
                         $(".tishi").css("color","red").html("密码格式有误！");
                         passtate = false;
                         return;
                     }

                 }
                 function funpass1() {
                     var pass = $("#password").val();
                     var passcont = $("#password1").val();
                     if(pass ==passcont){
                         $(".tishi1").css("color","green").html("验证通过！");
                         passtate1 = true;
                         return;
                     }else{
                         $(".tishi1").css("color","red").html("输入不一致！");
                         passtate1 = false;
                         return;
                     }

                 }
             })
         </script>
     </article>
</body>
</html>